<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>人力资源管理系统 - 项目中心</title>
  <!-- 引入外部资源 -->
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

  <!-- Tailwind配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#2563eb',
            secondary: '#64748b',
            success: '#10b981',
            warning: '#f59e0b',
            danger: '#ef4444',
            dark: '#1e293b',
            light: '#f8fafc'
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>

  <!-- 引入公共CSS -->
  <link rel="stylesheet" href="css/common.css">

  <!-- 引入API和公共JS -->
  <script src="js/api.js"></script>
  <script src="js/common.js"></script>
</head>
<body class="bg-gray-50 text-gray-800 font-sans">
  <div id="app" class="flex h-screen overflow-hidden">
    <!-- 侧边栏 -->
    <aside id="sidebar" class="w-64 bg-white border-r border-gray-200 flex-shrink-0 hidden md:block transition-all duration-300">
      <div class="p-5 border-b border-gray-200">
        <h1 class="text-xl font-bold text-primary">人力资源管理系统</h1>
      </div>

      <nav class="p-3">
        <ul>
          <li>
            <a href="index.html" class="sidebar-item">
              <i class="fa fa-dashboard"></i>
              <span>仪表盘</span>
            </a>
          </li>
          <li>
            <a href="projects.html" class="sidebar-item active">
              <i class="fa fa-briefcase"></i>
              <span>项目中心</span>
            </a>
          </li>
          <li>
            <a href="talents.html" class="sidebar-item">
              <i class="fa fa-users"></i>
              <span>人才库</span>
            </a>
          </li>
          <li>
            <a href="tasks.html" class="sidebar-item">
              <i class="fa fa-tasks"></i>
              <span>任务管理</span>
            </a>
          </li>
          <li>
            <a href="reports.html" class="sidebar-item">
              <i class="fa fa-bar-chart"></i>
              <span>分析报表</span>
            </a>
          </li>
        </ul>
      </nav>

      <div class="absolute bottom-0 w-full p-4 border-t border-gray-200">
        <div class="flex items-center gap-3">
          <img id="userAvatar" src="https://picsum.photos/200/200?random=1" alt="用户头像" class="w-10 h-10 rounded-full object-cover">
          <div>
            <p id="user" class="font-medium text-sm">张三</p>
            <p id="userRole" class="text-xs text-gray-500">项目经理</p>
          </div>
          <button id="logoutBtn" class="ml-auto text-gray-500 hover:text-danger">
            <i class="fa fa-sign-out"></i>
          </button>
        </div>
      </div>
    </aside>

    <!-- 主内容区 -->
    <main class="flex-1 flex flex-col overflow-hidden">
      <!-- 顶部导航 -->
      <header class="bg-white border-b border-gray-200 h-16 flex items-center justify-between px-6">
        <div class="flex items-center">
          <button id="sidebarToggle" class="md:hidden mr-4 text-gray-500">
            <i class="fa fa-bars text-xl"></i>
          </button>
          <h2 id="pageTitle" class="text-lg font-semibold">项目中心</h2>
        </div>

        <div class="flex items-center gap-4">
          <div class="relative">
            <input type="text" placeholder="搜索..." id="globalSearch" class="pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
            <i class="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
          </div>

          <button id="notificationBtn" class="relative text-gray-500 hover:text-primary">
            <i class="fa fa-bell text-xl"></i>
            <span id="notificationCount" class="absolute -top-1 -right-1 bg-danger text-white text-xs w-4 h-4 rounded-full flex items-center justify-center">3</span>
          </button>
        </div>
      </header>

      <!-- 页面内容 -->
      <div class="flex-1 overflow-y-auto p-6">
        <div class="flex flex-wrap gap-3 mb-6">
          <div class="relative flex-1 min-w-[200px]">
            <input type="text" id="projectSearch" placeholder="搜索项目..." class="w-full pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
            <i class="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
          </div>

          <select id="projectTechFilter" class="px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
            <option value="">所有技术栈</option>
            <option value="前端开发">前端开发</option>
            <option value="后端开发">后端开发</option>
            <option value="DevOps">DevOps</option>
          </select>

          <select id="projectStatusFilter" class="px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
            <option value="">所有状态</option>
            <option value="规划中">规划中</option>
            <option value="进行中">进行中</option>
            <option value="已完成">已完成</option>
          </select>

          <button id="newProjectBtn" class="btn btn-primary">
            <i class="fa fa-plus mr-2"></i>新建项目
          </button>
        </div>

        <div id="projectsContainer" class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <!-- 项目列表 -->
          <div class="card">
            <div class="flex justify-between items-start">
              <div>
                <h4 class="font-medium">企业官网重构</h4>
                <p class="text-sm text-gray-500 mt-1">前端开发 | 进行中</p>
              </div>
              <span class="badge bg-primary/20 text-primary">前端</span>
            </div>
            <div class="mt-4">
              <div class="flex justify-between text-sm mb-1">
                <span>完成度</span>
                <span>65%</span>
              </div>
              <div class="w-full bg-gray-200 rounded-full h-2.5">
                <div class="progress-bar bg-primary" style="width: 65%"></div>
              </div>
            </div>
            <div class="flex justify-between items-center mt-4 text-sm">
              <span class="text-gray-500">截止日期: 2023-07-30</span>
              <button class="text-primary hover:underline">详情</button>
            </div>
          </div>

          <div class="card">
            <div class="flex justify-between items-start">
              <div>
                <h4 class="font-medium">移动应用开发</h4>
                <p class="text-sm text-gray-500 mt-1">全栈开发 | 进行中</p>
              </div>
              <span class="badge bg-success/20 text-success">全栈</span>
            </div>
            <div class="mt-4">
              <div class="flex justify-between text-sm mb-1">
                <span>完成度</span>
                <span>45%</span>
              </div>
              <div class="w-full bg-gray-200 rounded-full h-2.5">
                <div class="progress-bar bg-success" style="width: 45%"></div>
              </div>
            </div>
            <div class="flex justify-between items-center mt-4 text-sm">
              <span class="text-gray-500">截止日期: 2023-08-15</span>
              <button class="text-primary hover:underline">详情</button>
            </div>
          </div>

          <div class="card">
            <div class="flex justify-between items-start">
              <div>
                <h4 class="font-medium">数据分析平台</h4>
                <p class="text-sm text-gray-500 mt-1">数据科学 | 已完成</p>
              </div>
              <span class="badge bg-secondary/20 text-secondary">数据</span>
            </div>
            <div class="mt-4">
              <div class="flex justify-between text-sm mb-1">
                <span>完成度</span>
                <span>100%</span>
              </div>
              <div class="w-full bg-gray-200 rounded-full h-2.5">
                <div class="progress-bar bg-secondary" style="width: 100%"></div>
              </div>
            </div>
            <div class="flex justify-between items-center mt-4 text-sm">
              <span class="text-gray-500">截止日期: 2023-05-20</span>
              <button class="text-primary hover:underline">详情</button>
            </div>
          </div>

          <div class="card">
            <div class="flex justify-between items-start">
              <div>
                <h4 class="font-medium">DevOps基础架构</h4>
                <p class="text-sm text-gray-500 mt-1">DevOps | 规划中</p>
              </div>
              <span class="badge bg-warning/20 text-warning">DevOps</span>
            </div>
            <div class="mt-4">
              <div class="flex justify-between text-sm mb-1">
                <span>完成度</span>
                <span>30%</span>
              </div>
              <div class="w-full bg-gray-200 rounded-full h-2.5">
                <div class="progress-bar bg-warning" style="width: 30%"></div>
              </div>
            </div>
            <div class="flex justify-between items-center mt-4 text-sm">
              <span class="text-gray-500">截止日期: 2023-09-10</span>
              <button class="text-primary hover:underline">详情</button>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>

  <!-- 引入公共JS -->
  <script src="js/common.js"></script>
  <script>
    // 项目页面特定JS
    document.addEventListener('DOMContentLoaded', function() {
      // 新建项目按钮事件
      const newProjectBtn = document.getElementById('newProjectBtn');
      if (newProjectBtn) {
        newProjectBtn.addEventListener('click', function() {
          // 新建项目逻辑
          showToast('新建项目功能将在此处实现');
        });
      }

      // 初始化搜索和筛选事件
      initSearchAndFilter();

      // 加载所有项目
      loadProjects();
    });

    // 初始化搜索和筛选事件
    function initSearchAndFilter() {
      const projectSearch = document.getElementById('projectSearch');
      const projectTechFilter = document.getElementById('projectTechFilter');
      const projectStatusFilter = document.getElementById('projectStatusFilter');

      if (projectSearch) {
        projectSearch.addEventListener('input', debounce(function() {
          filterProjects();
        }, 500));
      }

      if (projectTechFilter) {
        projectTechFilter.addEventListener('change', function() {
          filterProjects();
        });
      }

      if (projectStatusFilter) {
        projectStatusFilter.addEventListener('change', function() {
          filterProjects();
        });
      }
    }

    // 加载所有项目
    function loadProjects() {
      showLoading();
      api.getAllProjects()
        .then(projects => {
          renderProjects(projects);
          hideLoading();
        })
        .catch(error => {
          console.error('加载项目失败:', error);
          hideLoading();
          showToast('加载项目失败，请重试', 'error');
        });
    }

    // 筛选项目
    function filterProjects() {
      const searchTerm = document.getElementById('projectSearch').value.toLowerCase();
      const techFilter = document.getElementById('projectTechFilter').value;
      const statusFilter = document.getElementById('projectStatusFilter').value;

      showLoading();
      api.getAllProjects()
        .then(projects => {
          let filteredProjects = projects;

          // 应用搜索筛选
          if (searchTerm) {
            filteredProjects = filteredProjects.filter(project =>
              project.name.toLowerCase().includes(searchTerm) ||
              project.description.toLowerCase().includes(searchTerm)
            );
          }

          // 应用技术栈筛选
          if (techFilter) {
            filteredProjects = filteredProjects.filter(project =>
              project.techStack === techFilter
            );
          }

          // 应用状态筛选
          if (statusFilter) {
            filteredProjects = filteredProjects.filter(project =>
              project.status === statusFilter
            );
          }

          renderProjects(filteredProjects);
          hideLoading();
        })
        .catch(error => {
          console.error('筛选项目失败:', error);
          hideLoading();
          showToast('筛选项目失败，请重试', 'error');
        });
    }

    // 渲染项目列表
    function renderProjects(projects) {
      const projectsContainer = document.getElementById('projectsContainer');
      if (!projectsContainer) return;

      // 清空容器
      projectsContainer.innerHTML = '';

      if (!projects || projects.length === 0) {
        projectsContainer.innerHTML = `
          <div class="col-span-full text-center py-12">
            <i class="fa fa-search text-gray-300 text-5xl mb-4"></i>
            <p class="text-gray-500">没有找到匹配的项目</p>
          </div>
        `;
        return;
      }

      // 渲染项目卡片
      projects.forEach(project => {
        const projectElement = document.createElement('div');
        projectElement.className = 'card';

        projectElement.innerHTML = `
          <div class="flex justify-between items-start">
            <div>
              <h4 class="font-medium">${project.name}</h4>
              <p class="text-sm text-gray-500 mt-1">${project.techStack} | ${project.status}</p>
            </div>
            <span class="badge ${getBadgeColorClass(project.techStack)}">${getShortTechName(project.techStack)}</span>
          </div>
          <div class="mt-4">
            <div class="flex justify-between text-sm mb-1">
              <span>完成度</span>
              <span>${project.completionRate}%</span>
            </div>
            <div class="w-full bg-gray-200 rounded-full h-2.5">
              <div class="progress-bar ${getProgressColorClass(project.status)}" style="width: ${project.completionRate}%"></div>
            </div>
          </div>
          <div class="flex justify-between items-center mt-4 text-sm">
            <span class="text-gray-500">截止日期: ${formatDate(project.deadline)}</span>
            <button class="text-primary hover:underline" onclick="viewProjectDetail(${project.id})">详情</button>
          </div>
        `;

        projectsContainer.appendChild(projectElement);
      });
    }

    // 查看项目详情
    function viewProjectDetail(id) {
      // 这里可以实现跳转到项目详情页面的逻辑
      showToast(`查看项目ID: ${id} 的详情`);
    }

    // 获取技术栈对应的徽章颜色类
    function getBadgeColorClass(techStack) {
      switch(techStack) {
        case '前端开发':
          return 'bg-primary/20 text-primary';
        case '后端开发':
          return 'bg-success/20 text-success';
        case '全栈开发':
          return 'bg-secondary/20 text-secondary';
        case 'DevOps':
          return 'bg-warning/20 text-warning';
        case '数据科学':
          return 'bg-danger/20 text-danger';
        default:
          return 'bg-gray-200 text-gray-700';
      }
    }

    // 获取技术栈简称
    function getShortTechName(techStack) {
      switch(techStack) {
        case '前端开发':
          return '前端';
        case '后端开发':
          return '后端';
        case '全栈开发':
          return '全栈';
        case 'DevOps':
          return 'DevOps';
        case '数据科学':
          return '数据';
        default:
          return '其他';
      }
    }

    // 获取进度条颜色类
    function getProgressColorClass(status) {
      switch(status) {
        case '进行中':
          return 'bg-primary';
        case '已完成':
          return 'bg-success';
        case '规划中':
          return 'bg-warning';
        default:
          return 'bg-gray-400';
      }
    }

    // 格式化日期
    function formatDate(dateString) {
      if (!dateString) return '无';
      const date = new Date(dateString);
      return date.toLocaleDateString('zh-CN');
    }

    // 防抖函数
    function debounce(func, wait) {
      let timeout;
      return function() {
        const context = this;
        const args = arguments;
        clearTimeout(timeout);
        timeout = setTimeout(() => func.apply(context, args), wait);
      };
    }
  </script>
</body>
</html>